<template>
    <div id="systemDict_" class="padding">
        <el-form :model="searchDatas" ref="searchDatas" class="padding">
            <el-form-item label="名称" prop="code_type_name">
                <el-input v-model="searchDatas.code_type_name"  style="width: 300px"></el-input>
                <el-button type="primary" @click="search()">查询</el-button>
            </el-form-item>
        </el-form>
        <table class="layui-hide" id="systemDict" lay-filter="systemDict"></table>
        <script type="text/html" id="toolbar">
          <div class="layui-btn-container">
            <button class="el-button el-button--success el-button--mini is-round"  lay-event="add">新增</button>
            <button class="el-button el-button--success is-round el-button--mini" lay-event="refresh">刷新列表</button>
          </div>
        </script>
        <script type="text/html" id="bar">
          <button class="el-button el-button--primary el-button--mini is-round" lay-event="edit" >编辑</button>
          <button class="el-button el-button--danger el-button--mini is-round" lay-event="del" >删除</button>
        </script>
        <!--隐藏项-->
        <div id="edit" style="display: none">
            <table class="layui-hide" id="systemDictEdit" lay-filter="systemDictEdit"></table>
        </div>
        <!--隐藏项-->
        <div id="edit_" style="display: none">
            <v-edit ref="edit" :data="data_" :search_="search_"></v-edit>
        </div>
        <!--隐藏项-->
        <div id="add" style="display: none">
            <div class="padding">
                <el-form :model="pDatas" :rules="rules" ref="pDatas" label-width="100px" class="padding">
                    <el-form-item label="类别" prop="code_type_name">
                        <el-input v-model="pDatas.code_type_name"></el-input>
                    </el-form-item>
                    <el-form-item label="拼音简码/备注" prop="memo">
                        <el-input v-model="pDatas.memo"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('pDatas')">立即创建</el-button>
                        <el-button @click="$refs['pDatas'].resetFields()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--隐藏项-->
        <div id="addEdit_" style="display: none">
            <el-form :model="datas" :rules="rules" ref="datas" label-width="100px" class="padding">
                <el-form-item label="类别">
                    <el-input v-model="datas.code_type_name" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="display_value">
                    <el-input v-model="datas.display_value"></el-input>
                </el-form-item>
                <el-form-item label="拼音简码/备注" prop="memo">
                    <el-input v-model="datas.memo"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm_('datas')">保存</el-button>
                    <el-button @click="$refs['datas'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import edit from './edit'
    export default {
        name: "systemdict",
        components:{
          'v-edit':edit,
        },
        data() {
            return {
                table_head:[
                    {field: 'id',  title: '编号', sort: true}
                    , {field: 'code_type_name',  title: '名称', sort: true}
                    , {fixed: 'right',width: 165,align:'center',templet: '#bar'}
                ],
                index:"",
                search_:false,
                pDatas:{
                    code_type_name:"",
                    flag:1,
                    code_id:0,
                    memo:"",
                },
                datas:{
                    code_type_name:"",
                    flag:1,
                    code_id:0,
                    memo:"",
                },
                data_:{
                    code_type_name:"",
                    flag:1,
                    code_id:0,
                    memo:"",
                },
                rules: {
                    code_type_name: [
                        {required: true, message: '请输入类别', trigger: 'blur'},
                    ],
                    display_value: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                },
                searchDatas:{
                    code_type_name:''
                }
            }
        },
        beforeCreate: function(){
            this.$nextTick(function () {
                layui.use('table');
            });
        },
        created:function () {
            this.$nextTick(function () {
                var config = {
                    elem: '#systemDict'
                    , url: burl + 'basic-information-system-dict/list/' //数据接口
                    , method:'post'
                    , where:{CrmSystemDictSearch: {flag: "1",code_id:"1"}}
                    , toolbar: '#toolbar'
                    , title: '系统字典'
                    , height: 580
                    , totalRow: true
                    , cols: [this.table_head]
                    , page: true //开启分页
                };
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    this.$cache_.layuiCachedTable(this,config);
                    //头工具栏事件
                    layui.table.on('toolbar(systemDict)', (obj)=>{
                        switch(obj.event){
                            case 'add':
                                this.alertAdd();
                                this.datas.code_id = obj.config.page.count+1;
                                break;
                            case 'refresh':
                                noCheckCache = true;
                                var config1 = {
                                    elem: '#systemDict'
                                    , url: burl + 'basic-information-system-dict/list/' //数据接口
                                    , method:'post'
                                    , where:{CrmSystemDictSearch: {flag: "1",code_id:"1"}}
                                    , toolbar: '#toolbar'
                                    , title: '系统字典'
                                    , height: 580
                                    , totalRow: true
                                    , cols: [this.table_head]
                                    , page: true //开启分页
                                };
                                this.$cache_.layuiCachedTable(this,config1);
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(systemDict)', (obj)=>{
                        switch(obj.event){
                            case 'edit':
                                this.search_ = !this.search_
                                this.alertEdit(obj.data);
                                break;
                            case 'del':
                                layer.confirm("确认是否删除该文件！", (i)=>{
                                    layer.close(i)
                                    this.$post('basic-information-system-dict/delete-type?code_type='+obj.data.code_type,{})
                                        .then((response) => {//这里使用了ES6的语法
                                            if (response.data.res == 1) {//成功
                                                this.$message({message:"删除成功！",type:"success"})
                                                obj.del()
                                            }else{//失败
                                                this.$message({message:"删除失败！",type:"error"})
                                            }
                                        }).catch((response) => {
                                        layer.msg("错误！",{icon:2})
                                    });
                                });
                                break;
                        };
                    });
                });
            });
        },
        methods:{
            search:function(){
                noCheckCache = true
                var config = {
                    elem: '#systemDict'
                    , url: burl + 'basic-information-system-dict/list/' //数据接口
                    , method:'post'
                    , where:{CrmSystemDictSearch: {flag: "1",code_id:"1",code_type_name:this.searchDatas.code_type_name}}
                    , toolbar: '#toolbar'
                    , title: '系统字典'
                    , height: 580
                    , totalRow: true
                    , cols: [this.table_head]
                    , page: true //开启分页
                };
                this.$cache_.layuiCachedTable(this,config);
            },
            alertAdd: function () {
                this.$cache_.flushData(this.datas)
                this.datas.code_type = this.$my_.$_GET['code_type'];
                this.datas.flag = 1;
                this.datas.code_id = 0;
                allIndex = layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['40%', '70%'], //宽高
                    close: true,
                    shadeClose: true,
                    content:$("#add"),
                });
            },
            alertEdit: function (data=null) {
                this.data_ = data;
                //编辑页面页面层
                allIndex = layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['80%', '70%'], //宽高
                    close: true,
                    shadeClose: true,
                    content: $("#edit_"),
                });
            },
            submitForm(datas) {
                this.$refs[datas].validate((valid) => {
                    if (valid) {
                        this.$post('basic-information-system-dict/add-type',{CrmSystemDict:this.pDatas})
                            .then((response) => {//这里使用了ES6的语法
                                if (response.data.res == 1) {//成功
                                    this.$message({message:"新增成功！",type:"success"})
                                }else{//失败
                                    this.$message({message:"新增失败！",type:"error"})
                                }
                                layer.close(allIndex)
                            }).catch((response) => {
                            this.$message({message:"新增错误！",type:"error"})
                        });
                        return false;
                    } else {
                        return false;
                    }
                });
            },
            submitForm_(datas) {
                this.$refs[datas].validate((valid) => {
                    if (valid) {
                        switch (this.$refs['edit'].type){
                            case "add":
                                this.$post('basic-information-system-dict/add',{CrmSystemDict:this.datas})
                                    .then((response) => {
                                        if (response.data.res == 1) {//成功
                                            this.$message({message:"新增成功！",type:"success"})
                                        }else{//失败
                                            this.$message({message:"新增失败！",type:"error"})
                                        }
                                        layer.close(allIndex);
                                    }).catch((response) => {
                                    this.$message({message:"新增错误！",type:"error"})
                                });
                                break;
                            case "edit":
                                this.$post('basic-information-system-dict/edit?id='+this.datas.id,{CrmSystemDict:this.datas})
                                    .then((response) => {
                                        if (response.data.res == 1) {//成功
                                            allSuccess = 'success'
                                            this.$message({message:"修改成功！",type:"success"})
                                        }else{//失败
                                            this.$message({message:"修改失败！",type:"error"})
                                        }
                                        layer.close(allIndex);
                                    }).catch((response) => {
                                    this.$message({message:"错误！",type:"error"})
                                });
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>